<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>PDF</title>
  <link rel="stylesheet" href="../../../css/normalize.css">
  <style>
    .wrap {
      width:21cm;
      margin: 0 auto;
      background-color:#fff;
    }
    .page {
      /*height: 2242px;*/
      /*width: 80%;*/
      margin: auto;
      position: relative;
    }
    .page .content {
      /* width: 95%;
      margin: auto; */
    }
    .page .content .title span {
      padding-left: 25px;
    }
    .content table{
      width: 100%;
      border-collapse: collapse;
    }
    .content .table1 table tr td {
      border: 1px solid #000;
      padding: 10px;
      text-align: center;
      min-width: 80px;
    }
    .content .table1 table tr th {
      border: 1px solid #000;
      padding: 10px;
      text-align: center;
      min-width: 80px;
    }
    #pay1, #pay2, #pay3, #pay4 {
      height: 39px;
    }
    .info {
      width: 77px;
    }
    .table1 table tr span:first-child {
      width: 120px;
    }
    .table1 table tr span:last-child {
      width: 320px;
      word-break: break-all;
    }
    .table1 table tr span {
      display: inline-block;
      font-weight: 900;
    }
    .table2, .table4, .table6 {
      margin: 20px auto;
    }
    .table2 table tr td {
      border: 1px solid #000;
      width: 50%;
      text-align: center;
      font-weight: 900;
      padding: 10px;
    }
    .table3 tr th, .table3 tr td {
      padding: 10px;
      border:1px solid #000;
      text-align: center;
    }
    .table4 h2, .table5 h2, .table6 h2, .table6 p, .table7 h2, .items h2 {
      margin: 0;
    }
    .table4 tr td {
      padding: 10px;
      border: 1px solid #000;
      text-align: left;
    }
    .table4 tr td span {
      font-weight: 900;
    }
    .table5 div {
      border: 1px solid #000;
      padding: 0 10px;
    }
    .table5 div span {
      font-weight: 900;
    }
    .table7 {
      padding: 30px 0 50px 0;
      overflow: hidden;
    }
    .table7 h2, .table7 img {
      float: left;
    }
    .table7 img {
      width: 250px;
      height: 30px;
      border-bottom: 1px solid #000;
    }
    .header {
      padding: 10px;
      display: flex;
      justify-content: space-between;
    }
  </style>
</head>
<body>
  <div id="app" class="wrap">
    <!-- <img style="width: 100px; float: left;" src="../../../image/logo.png" alt=""> -->
    <h1 style="text-align: center; line-height: 100px;">宏 宇 教 育 收 款 收 据</h1>
    <div class="header">
      <span>开票日期:{{nowDate}}</span>
      <span>学生姓名:{{name}}</span>
      <span>电话:{{phoneNum}}</span>
      <span>NO:{{no}}</span>
    </div>
    <div class="page">
      <div class="content">
        <div class="table1">
          <table>
            <thead>
              <tr>
                <th>项目名称</th>
                <th>班型</th>
                <th>总金额(元)</th>
                <th>期数</th>
                <th>本期金额(元)</th>
                <th>实收金额(元)</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>培训费</td>
                <td>{{courseType}}</td>
                <td>{{totalFee}}</td>
                <td>{{stage}}</td>
                <td>{{currentAmount}}</td>
                <td>{{currentAmount}}</td>
              </tr>
              <tr>
                <td>合计人民币(大写)</td>
                <td colspan="5">{{totalRMB}}</td>
              </tr>
              <tr>
                <td>说明</td>
                <td colspan="5">{{typeName}}</td>
              </tr>
            </tbody>
          </table>
          <div style="display: flex; padding: 20px 50px 0 50px;">
            <span style="flex: 3;">收款单位(盖章):</span>
            <span style="flex: 3;">报名日期:{{createDate}}</span>
            <span style="flex: 3;">收款人:{{ teacherName }}</span>
          </div>
          <!-- <div style="display: flex; padding: 25px 50px;">
            <span style="flex: 3;">日期:</span>
            <span style="flex: 3;">日期:</span>
            <span style="flex: 3;">日期:</span>
          </div> -->
        </div>
      </div>
    </div>
  </div>
  <script src="../../../js/jquery.js"></script>
  <script src="../../../js/common.js"></script>
  <script src="../../../js/moment.js"></script>
  <script src="../../../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        name: '',
        teacherName: '',
        typeName: '',
        courseType: '',
        phoneNum: '',
        nowDate: '',
        totalFee: 0,
        stage: '',
        currentAmount: 0,
        totalRMB: '',
        no: '',
        createDate: '',
      },
      mounted() {
        this.nowDate = moment().format('YYYY-MM-DD');
        const { name, phoneNum, multipleSelection, teacherName, courseType, typeName, } = JSON.parse(localStorage.getItem('receiptData'));
        multipleSelection.map(item => {
          this.totalFee = item.allFee;
          this.stage
        });
        this.name = name;
        this.teacherName = teacherName;
        this.typeName = typeName;
        this.courseType = courseType;
        this.phoneNum = phoneNum;
        this.totalFee = multipleSelection[0].allFee;
        this.stage = multipleSelection.map(item => item.stage).toString();
        this.currentAmount = multipleSelection.map(item => +item.amount).reduce((cur, pre) => cur + pre, 0);
        this.totalRMB = convertCurrency(this.currentAmount)
        this.no = getQuery('no');
        this.createDate = getQuery('createDate')
      },
    });
  </script>
</body>
</html>